<template>
  <div class="hd-containner">
    <a-layout>
      <a-layout-header></a-layout-header>
      <a-layout>
        <a-layout-sider>
          <a-anchor class="hd-anchor">
            <a-anchor-link href="#components-user-setting" title="用户设置" />
            <a-anchor-link
              href="#components-system-setting"
              title="系统设置"
            /> </a-anchor
        ></a-layout-sider>
        <a-layout-content>
          <a-card id="components-user-setting" title="用户设置">
            <url-setting />
          </a-card>
          <a-card id="components-system-setting" title="系统设置">
            <a-list itemLayout="horizontal">
              <a-list-item style="text-align: left">
                <a-list-item-meta>
                  <template v-slot:title>
                    <a>启动</a>
                  </template>
                  <template v-slot:description>
                    <span> 开机自动启动 </span>
                  </template>
                </a-list-item-meta>
                <template v-slot:actions>
                  <a-switch
                    checkedChildren="开"
                    unCheckedChildren="关"
                    v-model="autoLaunchChecked"
                    @change="autoLaunchChange(autoLaunchChecked)"
                  />
                </template>
              </a-list-item>
            </a-list>
          </a-card>
        </a-layout-content>
      </a-layout>
      <a-layout-footer></a-layout-footer>
    </a-layout>
  </div>
</template>
<script>
import { localApi } from "@/api/main";
import Shortcut from "./example/Shortcut.vue";
import UrlSetting from "./common/user-setting.vue";

export default {
  components: {
    UrlSetting,
    Shortcut,
  },
  data() {
    return {
      autoLaunchChecked: false,
    };
  },
  mounted() {
    this.autoLaunchInit();
  },
  methods: {
    autoLaunchInit() {
      localApi("autoLaunchIsEnabled", {})
        .then((res) => {
          if (res.code !== 0) {
            return false;
          }
          this.autoLaunchChecked = res.data.isEnabled;
        })
        .catch((err) => {
          console.log("err:", err);
        });
    },
    autoLaunchChange(checkStatus) {
      const params = {
        checkStatus: checkStatus,
      };
      if (checkStatus) {
        localApi("autoLaunchEnable", params)
          .then((res) => {
            if (res.code !== 0) {
              return false;
            }
            this.autoLaunchChecked = res.data.isEnabled;
          })
          .catch((err) => {
            console.log("err:", err);
          });
      } else {
        localApi("autoLaunchDisable", params)
          .then((res) => {
            if (res.code !== 0) {
              return false;
            }
            this.autoLaunchChecked = res.data.isEnabled;
          })
          .catch((err) => {
            console.log("err:", err);
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.hd-containner {
  .ant-layout-header {
    background-color: #fff;
  }
  .ant-layout-sider {
    background: #ffffff;
    /deep/ .hd-anchor {
      padding: 10rem 2rem;
    }
  }
  .ant-layout-footer {
    background-color: #fff;
  }
}
// 嵌套
#set {
  .ant-list-item:last-child {
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>  